<table style="margin:0px auto 20px auto;">
    <tr>
        <td colspan="3" style="text-align:center">
            <h1 style="margin:0px"><small>REGISTERED MEMBERS</small></h1>
        </td>
    </tr>
    <tr>
        <td><img src="/themes/{{siteInfo.theme}}/assets/img/line_left.png" alt=""></td>
        <td style="padding:0 10px 0 10px;text-align:center"><h2 style="margin:0px">会员注册</h2></td>
        <td><img src="/themes/{{siteInfo.theme}}/assets/img/line_right.png" alt=""></td>
    </tr>
</table>
<div class="container">
    <form id="register-form" class="form-horizontal" role="form" action="/api/register" method="post">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="nickname" placeholder="请输入姓名" {{#if data}}value="{{data.nickname}}"{{/if}}>
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱" {{#if data}}value="{{data.email}}"{{/if}}>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label for="confirmPassword" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="请再输一次密码">
            </div>
        </div>
        <div class="form-group">
            <label for="PhoneNumber" class="col-sm-2 control-label">手机</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="PhoneNumber" name="PhoneNumber" placeholder="请输入手机号码" {{#if data}}value="{{data.PhoneNumber}}"{{/if}}>
            </div>
        </div>
        <div class="form-group">
            <label for="vcode" class="col-sm-2 col-xs-2 control-label">验证码</label>
            <div class="col-sm-8 col-xs-6">
                <input type="text" class="form-control" id="vCode" name="vCode" placeholder="请输入短信验证码">
            </div>
            <div class="col-sm-2 col-xs-4">
                <button id="btn-send-code" type="button" class="btn btn-default btn-block">发送验证码</button>
            </div>
        </div>
        <div class="form-group">
            <label for="WorkYears" class="col-sm-2 control-label">工作年限</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" id="WorkYears" name="WorkYears" placeholder="请输入工作年限" {{#if data}}value="{{data.WorkYears}}"{{#else}}value="1"{{/else}}{{/if}}>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="submit" class="btn btn-primary btn-lg btn-block">立即注册</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    var timeLeft = 30;
    $(document).ready(function () {
        {{#if errorMsg}}
            alert("{{errorMsg}}");
        {{/if}}
        $("#btn-send-code").click(function () {
            timeLeft = 30;
            var phoneNumber = $('#PhoneNumber').val();
            if (!phoneNumber)
            {
                alert("请输入手机号");
                return;
            }
            var data = { 'PhoneNumber': phoneNumber };
            $.ajax({
                url: '/api/register',
                data: data,
                async: true,
                type: 'GET',
                success: function (data) {
                    console.log(data);
                    $("#vcode").val(data);
                },
                error: function ()
                {
                    $("#btn-send-code").removeAttr("disabled");
                },
            });
            $("#btn-send-code").attr("disabled", "true");
            var countdown = window.setInterval(function(){
                $("#btn-send-code").text("" + timeLeft + "秒后可重发");
                timeLeft--;
                if (timeLeft == 0)
                {
                    window.clearInterval(countdown);
                    $("#btn-send-code").text("重新发送");
                    $("#btn-send-code").removeAttr("disabled");
                }
            }, 1000);
        });
    });
    $(document).ready(function () {
        $('#register-form').bootstrapValidator({
            message: '无效字段',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                nickname: {
                    validators: {
                        notEmpty: {
                            message: '名字不能为空'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱格式不正确'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        identical: {
                            field: 'confirmPassword',
                            message: '两次输入的密码不一致'
                        }
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: {
                            message: '请再输一次密码'
                        },
                        identical: {
                            field: 'password',
                            message: '两次输入的密码不一致'
                        }
                    }
                },
                PhoneNumber: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        },
                        regexp: {
                            regexp: /^1[3|4|5|8][0-9]\d{8}$/,
                            message: '手机号码不正确'
                        }
                    }
                },
                vCode: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                }
            }
        });
    });

</script>